<template>
    <div class="body" >
      <el-container>
        <div class="el-aside" :style="{'width':isCollapse?'auto':'auto'}">
          <el-menu
            :collapse="isCollapse"
            default-active="1-1"
            class="el-menu el-menu-vertical-demo"
            background-color="#304156"
            text-color="#fff"
            menu-trigger="click"
            @select="handleMenuSelect"
            @open="handleOpen"
            @close="handleClose"
            active-text-color="#409EFF">
            <el-submenu v-for="(item,index) in leftNavMenu" :index="(index+1).toString()" :key="index" >
              <template slot="title" >
                <div style="display: flex;flex-direction: row;">
                  <div style="text-align: left;">
                    <i :class="item.icon" style="font-size: 18px;color: aliceblue;" > {{ (!isCollapse)? item.title:''}} </i>
                  </div>
                </div>
              </template>
              <el-menu-item-group v-for="(item1,index1) in item.children" :key="index1"  >
                <template slot="title"></template>
                <el-menu-item :index="(index+1)+'-'+(index1+1)" style="min-width: auto!important;;">
                  <i :class="item1.icon"></i>
                  <span>{{item1.title}}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </div>
        <el-container>
          <el-header height="5vh">
            <el-radio-group v-model="isCollapse" size="mini"  >
            <el-radio-button  :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
            <el-breadcrumb separator-class="el-icon-arrow-right" style="flex:1;margin-left: 2%;">
              <el-breadcrumb-item :to="{ path: '/home/dataAnalysis' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>数据分析</el-breadcrumb-item>
            </el-breadcrumb>
            <el-popover
              placement="bottom"
              v-model="outVisible"
              width="160">
              <p>退出登录</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="outVisible = false">取消</el-button>
                <el-button type="primary" size="mini" @click="exitLogin">确定</el-button>
              </div>
              <div slot="reference">
                <el-avatar shape="square" :size="35" src="https://picsum.photos/280/280?random=1"></el-avatar>
                <span>
                  <i style="margin-left: 5px;" class="el-icon-caret-bottom" ></i>
                </span>
              </div>
            </el-popover>
            
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>   
  </template>
 <script>
 
 export default {
   data() {
       return {
           isCollapse: false,
           name: '',
           email: '',
           selected:[],
           radio:'1',
           verify:'',
           outVisible:false,
           LableInput:'',
           codeImageUrl:'https://meis.gzfezx.com/public/verify.html?',
           leftNavMenu:[
           {
                icon:'el-icon-s-home',
                title:'首页',
                children:[
                  {
                    icon:'el-icon-s-unfold',
                    title:'数据分析',
                    route: '/home/dataAnalysis',
                  }
                ]
              },
              {
                icon:'el-icon-s-goods',
                title:'商品',
                children:[
                {
                    icon:'el-icon-s-grid',
                    title:'商品列表',
                    route: '/home/goodsList',
                  },
                  {
                    icon:'el-icon-folder-add',
                    title:'添加商品',
                    route:'/home/addGood'
                  },
                  {
                    icon:'el-icon-menu',
                    title:'商品分类',
                  },
                  {
                    icon:'el-icon-collection',
                    title:'商品类型',
                  },
                  {
                    icon:'el-icon-office-building',
                    title:'品牌管理',
                  },
                  
                ]
              },
              {
                icon:'el-icon-notebook-2',
                title:'订单',
                children:[
                {
                    icon:'el-icon-notebook-1',
                    title:'订单列表',
                  },
                  {
                    icon:'el-icon-setting',
                    title:'订单设置',
                  },
                  {
                    icon:'el-icon-sell',
                    title:'退货申请处理',
                  },
                  {
                    icon:'el-icon-collection',
                    title:'退货原因设置',
                  },
                  
                ]
              },
              {
                icon:'el-icon-present',
                title:'营销',
                children:[
                {
                    icon:'el-icon-star-off',
                    title:'秒杀活动列表',
                  },
                  {
                    icon:'el-icon-s-order',
                    title:'优惠券列表',
                  },
                  {
                    icon:'el-icon-s-goods',
                    title:'品牌推荐',
                  },
                  {
                    icon:'el-icon-collection',
                    title:'人气推荐',
                  },
                  {
                    icon:'el-icon-help',
                    title:'新品推荐',
                  },
                  {
                    icon:'el-icon-s-help',
                    title:'人气推荐',
                  },
                  {
                    icon:'el-icon-s-help',
                    title:'专题推荐',
                  },
                  {
                    icon:'el-icon-s-operation',
                    title:'广告列表',
                  },
                  
                ]
              },
              {
                icon:'el-icon-key',
                title:'权限',
                children:[
                {
                    icon:'el-icon-user',
                    title:'用户列表',
                  },
                  {
                    icon:'el-icon-school',
                    title:'角色列表',
                  },
                  {
                    icon:'el-icon-s-grid',
                    title:'菜单列表',
                  }
                  
                ]
              },
           ],
           
       };
   },
   async created() {
       // 获取用户列表
       this.name = JSON.parse(localStorage.getItem('loginStorage')).username;
       this.$router.push('home/dataAnalysis');
   },
   methods: {
        handleMenuSelect(key) {
          const [menuIndex, subIndex] = key.split('-').map((num) => parseInt(num, 10) - 1);
          const selectedRoute = this.leftNavMenu[menuIndex]?.children[subIndex]?.route;
          if (selectedRoute&& selectedRoute !== this.$route.path) {
            this.$router.push(selectedRoute); // 跳转到指定路由
          }
      },
      handleOpen() {
        // 当打开子菜单时，展开菜单
        this.isCollapse = false;
      },
      handleClose() {
        // 当关闭子菜单时，收起菜单
        this.isCollapse = true;
      },
      exitLogin(){
        localStorage.clear();
        this.$router.replace(
            {name:'loginPager'}
          )
      },
   },
 };
 </script>
  
  <style>
  .el-header, .el-footer {
    display: flex;
    background-color: #fff;
    align-items: center;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #e0dbdb;
  }
  
  .el-aside {
    width: auto;
    color: #333;
    text-align: center;
    background-color: #304156;
    height: 100vh;
  }
  
  .el-main {
    width: 100%;
    height: 95vh;
    margin: 0px;
    padding: 0px;
    max-height: 95vh;
    color: #333;
    text-align: center;
  }
  .el-main::-webkit-scrollbar{
    display: none;
  }
  .el-aside::-webkit-scrollbar{
    display: none;
  }
  .el-menu{
    background-color: #304156;
    width: auto!important;
    /* overflow-y: auto; */
  }
  .el-menu-item-group__title{
    display: none;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
  }
  .el-menu::-webkit-scrollbar{
    display: none
  }
</style>

 
  <style scoped>
  .el-container {
      width: 100vw;
    }
  .body{
    max-height: 100vh;
    /* background-image: url('../../assets/img/login_bg.webp') ; */
    /* background-repeat: no-repeat; */
    background-attachment: fixed;
    background-size: cover;
    /* width: 100%; */
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    /* display: flex; */
    
  }
  
  </style>